<template>
	<view class="content">
		<view class="scrollView">
			<scroll-view scroll-y style="height: 100%;" @scrolltolower="lower" :show-scrollbar="false">
				<view class="scrollViewItem">
					<view class="title">
						{{entity.Title}}
					</view>
					<view style="overflow: hidden;">
						<image src="../../static/order-on.png" mode=""></image>
						<view style="float:left">
							<text class="co">码上签</text>
							<text class="dt">{{entity.CreateTime?entity.CreateTime.substring(0,19):''}}</text>
						</view>

					</view>
					<view class="" style="margin-top: 40rpx;" v-html="entity.Content">
						<!-- {{entity.Content}} -->
					</view>
				</view>

				<!-- 上拉显示更多 -->
				<!-- <view  class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="newsListData"></uniLoadMore>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				queryParmas: {
					PageIndex: 1,
					PageRows: 10,
					// 根据时间的倒叙
					SortField: "CreateTime",
					// SortType: "desc",
					Search: {
						UserId: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').Id : ""
					}
				},
				// 总条数
				Total: 0,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				isActive: 0,
				// 默认显示的区块下标
				index: 0,
				// 默认显示的区块
				currentindex: 0,
				// 已读  未读数据
				category: [{
						id: 1,
						name: '已读',
					},
					{
						id: 2,
						name: '未读',
					},
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				// 消息通知列表  
				newsListData: [],
				// 消息详情
				entity: {},
				// 用户信息
				userInfo: uni.getStorageSync('userInfo')
			}
		},
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.status = "loading"
			this.newsListData = []
			this.queryParmas.PageIndex = 1
			// 重新获取消息通知记录
			this.GetUnreadMessage()
			uni.stopPullDownRefresh(); //停止刷新
		},
		onLoad(options) {
			console.log('传递过来的', JSON.parse(options.data))
			let data = null
			if (options.data) {
				data = JSON.parse(options.data)
			}
			uni.setNavigationBarTitle({
				title: data.Title
			});

			// console.log('数据', data)
			if (data.userid === '') {
				// 说明没有读取  调用读取接口
				this.getMessageSaveData(data.Id)
				// 获取消息详情
				this.getNewsDetail(data.Id)
			} else {
				// 获取消息详情
				this.getNewsDetail(data.Id)
			}

		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()


		},
		onShow() {
			this.status = "loading"
			this.newsListData = []

		},
		methods: {

			// 消息读取
			getMessageSaveData(Id) {
				this.$http('post', '/Base/Base_MessageUser/SaveData', {
					MessageId: Id,
					UserId: this.userInfo.Id
				}).then(res => {
					if (res.Success) {
						console.log('消息是否已经读取完成', res)

					} else this.$api.msg(res.Msg)
				})
			},

			// 触底加载
			lower() {
				if (this.newsListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.queryParmas.PageIndex += 1
				this.$http('post', '/Base/Base_Message/GetUnreadMessage', this.queryParmas).then(res => {
					if (res.Success) {
						console.log('获取消息列表', res)
						this.Total = res.Total
						let lists = res.Data
						this.newsListData = this.newsListData.concat(lists)

					} else this.$api.msg(res.Msg)
				})
			},

			// 获取消息详情
			getNewsDetail(Id) {
				this.status = "loading"
				this.$http('post', '/Base/Base_Message/GetTheData', {
					id: Id
				}).then(res => {
					if (res.Success) {
						console.log('获取消息详情获取消息详情获取消息详情获取消息详情', res)
						this.entity = res.Data
						// this.Total = res.Total
						// let lists = res.Data
						// if(lists.length==0){
						// 	this.status = "noMore"
						// 	return
						// }
						// this.newsListData= res.Data
						// if (this.queryParmas.PageRows * this.queryParmas.PageIndex >= this.Total) {
						// 	this.contentText.contentnomore="没有更多了"
						// 	// 暂停加载  没有更多了
						// 	this.status = "noMore"
						// 	return
						// }

					} else {
						// 暂停加载  没有更多了
						this.status = "noMore"
						this.$api.msg(res.Msg)
					}
				})
			},

			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				// const query = uni.createSelectorQuery().in(this);
				// query.select('.tab-scroll').boundingClientRect(data => {
				// 	// 拿到 scroll-view 组件宽度
				// 	this.contentScrollW = data.width
				// }).exec();
				// query.selectAll('.tab-scroll_item').boundingClientRect(data => {
				// 	let dataLen = data.length;
				// 	for (let i = 0; i < dataLen; i++) {
				// 		//  scroll-view 子元素组件距离左边栏的距离
				// 		this.category[i].left = data[i].left;
				// 		//  scroll-view 子元素组件宽度
				// 		this.category[i].width = data[i].width
				// 	}
				// }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;
		height: 100%;

		.scrollView {
			// 兼容H5和APP
			/* #ifdef H5 */
			height: calc(100vh - 100px);
			/* #endif */
			/* #ifdef APP */
			height: calc(100vh - 50px);
			/* #endif */
		}

		.scrollViewItem {
			padding: 25rpx;
			border-radius: 10rpx;
			// box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9);
			margin: 25rpx;

			// .title {
			// 	display: flex;
			// 	justify-content: space-between;
			// 	padding: 20rpx 0;

			// 	.right {
			// 		font-size: 13rpx;
			// 	}

			// 	border-bottom: 1px solid #CBCCCC;
			// }
			.title {
				display: flex;
				justify-content: space-between;
				font-size: 20px;
				font-weight: bold;
				line-height: 28px;
			}

			image {
				float: left;
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
				margin-top: 30rpx;
			}

			.co {
				display: block;
				margin-top: 34rpx;
				font-size: 12px;
				color: #666;
			}

			.dt {
				display: block;
				font-size: 12px;
				color: #666;
			}

			.content {
				padding: 20rpx 0;

			}

		}

	}



	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	::v-deep.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>